<template>
  <div class="my">
    <van-pull-refresh v-model="loading" @refresh="onRefresh">
      <header>
        <div class="my-bg">
          <img src="../../public/images/mytopbg.png" alt="" />
        </div>
        <div class="login">
          <div class="login-actore" v-if="loginStatus">
            <!-- <div class="actore-name">{{ userInfo.nickName }}</div> -->
            <div class="header">
              <div class="avatar">
                <img
                  src="https://ts1.cn.mm.bing.net/th/id/R-C.d0cdb390350600169835c8343480b0af?rik=gLkyDf9xwbXdQg&riu=http%3a%2f%2finews.gtimg.com%2fnewsapp_match%2f0%2f15103659087%2f0&ehk=zK0MTj34tChhjHcpXaZER22pNZjchBBOnrkMTllNa0w%3d&risl=&pid=ImgRaw&r=0"
                  alt=""
                />
              </div>
              <p class="user">坤坤</p>
            </div>
          </div>
          <div class="login-actore" v-else>
            <div class="actore-name" @click="goLogin">登录/注册</div>
          </div>
          <div class="loginvip">
            <img src="../../public/images/mytoprember.png" alt="" />
          </div>
        </div>
      </header>
      <div class="list" @click="goLogin">
        <div class="list-item">
          <van-icon name="location" color="#FF4466" />
          <div>地址</div>
        </div>
        <div class="list-item">
          <van-icon name="setting" color="#FF4466" />
          <div>设置</div>
        </div>
        <div class="list-item">
          <van-icon name="gem" color="#FF4466" />
          <div>钻石</div>
        </div>
        <div class="list-item">
          <van-icon name="bag" color="#FF4466" />
          <div>购物</div>
        </div>
        <div class="list-item">
          <van-icon name="gold-coin" color="#FF4466" />
          <div>余额</div>
        </div>
        <div class="list-item">
          <van-icon name="shop" color="#FF4466" />
          <div>余额</div>
        </div>
        <div class="list-item">
          <van-icon name="shop-collect" color="#FF4466" />
          <div>商家</div>
        </div>
        <div class="list-item">
          <van-icon name="vip-card" color="#FF4466" />
          <div>会员</div>
        </div>
        <div class="list-item">
          <van-icon name="hot" color="#FF4466" />
          <div>热门</div>
        </div>
        <div class="list-item">
          <van-icon name="cash-back-record" color="#FF4466" />
          <div>交易</div>
        </div>
        <div class="list-item">
          <van-icon name="live" color="#FF4466" badge="9" />
          <div>视频</div>
        </div>
        <div class="list-item">
          <van-icon name="wechat-moments" color="#FF4466" dot />
          <div>动态</div>
        </div>
        <div class="list-item">
          <van-icon name="youzan-shield" color="#FF4466"/>
          <div>好评</div>
        </div>
        <div class="list-item">
          <van-icon name="underway" color="#FF4466"/>
          <div>历史</div>
        </div>
        <div class="list-item">
          <van-icon name="more" color="#FF4466"/>
          <div>更多</div>
        </div>
      </div>
      
          <div class="modify" @click="router.push('/modify')">
            <van-icon name="edit" size="0.4rem" />修改密码
          </div>
      <section v-if="loginStatus">
          <div @click="goOut">
            <van-icon name="revoke" size="0.4rem" />退出登录
          </div>
      </section>
    </van-pull-refresh>
    <Tabbar></Tabbar>
  </div>
</template>

<script setup>
import Tabbar from "@/components/common/Tabbar.vue";
import { useRouter } from "vue-router";
import { useUserStore } from "@/store/user.js";
import { computed, ref } from "vue";
import { showToast } from "vant";

const loading = ref(false);
const onRefresh = () => {
  setTimeout(() => {
    showToast("刷新成功");
    loading.value = false;
    count.value++;
  }, 500);
};

const userStore = useUserStore();
let router = useRouter();
const goLogin = () => {
  router.push({ path: "/login" });
};

// 计算属性
const loginStatus = computed(() => userStore.loginStatus);
const userInfo = computed(() => userStore.userInfo);

// 退出登录
const goOut = () => {
  userStore.loginOut();
  router.push({ path: "/" });
};
</script>

<style scoped>
.my {
  background-color: #f1f1f1;
}

.my .my-bg {
  width: 100%;
  height: 2.5rem;
}

.my .my-bg img {
  width: 100%;
  height: 100%;
}

.my header {
  /* overflow: hidden; */
  /* background-color: red; */
}

.my header .login {
  position: relative;
  width: 93%;
  height: 4.125rem;
  background-color: #fff;
  color: red;
  text-align: center;
  /* 文字也居中 */
  margin: -1.25rem auto;
  /* 水平居中 */
  border-radius: 0.1875rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  box-sizing: border-box;
}

.my header .login .login-actore {
  width: 100%;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.header {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.avatar {
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: 10px;
}
.avatar img {
  width: 100%;
}
.user {
  color: #101010;
  font-size: 0.37333rem;
}
.my header .login .login-actore .actore-name {
  width: 100%;
  text-align: center;
  line-height: 1.5rem;
}

.my header .login .loginvip {
  width: 100%;
  height: 1.375rem;
}

.my header .login .loginvip img {
  width: 100%;
  height: 100%;
}

.my section {
  width: 93%;
  height: 1.5rem;
  background-color: #fff;
  margin: 0 auto 1.5rem auto;
  line-height: 1.5rem;
  font-size: 0.4375rem;
  border-radius: 0.2875rem;
  padding: 0 1rem;
  text-align: center;
  box-sizing: border-box;
}

.list {
  width: 93%;
  /* height: 14rem; */
  background-color: #fff;
  margin: 1.9rem auto;
  border-radius: 0.2875rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-content: space-around;
}
.list-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0.5rem 1rem;
  font-size: 1rem;
}
.list-item div {
  font-size: 0.4333rem;
  color: #333;
}
.modify {
   width: 93%;
  height: 1.5rem;
  background-color: #fff;
  margin: 1.5rem auto 0.5rem auto;
  line-height: 1.5rem;
  font-size: 0.4375rem;
  border-radius: 0.2875rem;
  padding: 0 1rem;
  text-align: center;
  box-sizing: border-box;
}
</style>
